<template>
	<view class="">
		<view class="sub-yue">
			<view class="sub-yue-top u-flex">
				<text>押金开台</text>
				<view class="right-icon">
					<u-icon @click="closeSubYue" name="close" color="#333333" size="18"></u-icon>
				</view>
			</view>
			<view class="user-invie u-flex" v-if="false">
				<image src="../../static/bill.png"></image>
				<view class="user-invite-mes">
					<view class="u-flex">
						<text class="u-line-1">酱酱酱油</text> 邀请你一起玩
					</view>
					<view>
						加入邀请可以保存您的PK信息，会员免押金PK
					</view>
				</view>
			</view>
			<view class="pk-total">
				<view class="pk-price u-flex">
					<text>计费价格</text>
					<text>{{payDate.poolTablePrice}}元/小时</text>
				</view>
				<view class="pk-price-tips">
          每{{payDate.billingCfg.billingUnit}}分钟计费，最低消费{{payDate.poolTablePrice}}元
				</view>
				<view class="pk-price u-flex">
					<text>押金</text>
					<text>{{payDate.deposit}}元</text>
				</view>
			</view>
			<view class="sub-door-pay u-flex">
				<view class="door-tit">
					支付方式
				</view>
				<view class="door-adres u-flex" @click="showDoor=true">
					<text>{{payVal.name}}<text v-show="payVal.type===1">（余额：￥{{payDate.sumUserBalance}}元）</text></text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="check-area u-flex">
				<u-checkbox-group v-model="checked">
					<u-checkbox :checked="checked.length===1" shape="circle" activeColor="#FF7814" size="16"></u-checkbox>
				</u-checkbox-group>
				<view class="text-check">
					开台视为同意<text>《用户协议》</text>	及<text>《隐私政策》</text>
				</view>
			</view>
			<view class="sub-date-btm u-flex">
				<view class="">
					<view class="sub-date-btm-left u-flex">
						<view class="left-price">
							需付押金：<text>{{payDate.deposit}}</text>元
						</view>
						<text>结束即退押金</text>
					</view>
					<view class="tips-look u-flex" v-if="false">
						<text>查看明细</text>
						<u-icon name="arrow-up" color="#FF7814" size="10"></u-icon>
					</view>
				</view>
				<view class="sub-yue-btn" @click="toPlaying">
					立即开台
				</view>
			</view>
		</view>
		<u-picker :show="showDoor" :columns="columns" key-name="name" @cancel="showDoor=false" @confirm="selDoor"></u-picker>
	</view>
</template>

<script>
	export default {
		props:{
      notifyId:{
        type: String,
        default: "VIP_OPEN"
      },
      payDate:{
        type: Object,
        default:()=>({})
      }
    },
		data() {
			return {
				showSubYue:false, //开台弹窗
				typePkList:[
					{
						name:'输家付款',
						id:1
					},
					{
						name:'AA付款',
						id:2
					}
				],
				selTypeId:1,//选择pk方式id
				payVal:{type:1,name:'余额支付'},
				showDoor:false, //选择支付方式
				columns: [
					[{type:1,name:'余额支付'}, {type:'2',name:'微信支付'}]
				],
				checked:[''],

			}
		},
		onLoad(option) {
		},
		mounted() {
			this.selTypeId=this.notifyId;
			console.log(this.notifyId,'this.notifyId;')

		},
		methods:{
			//关闭开台
			closeSubYue(){
				this.$emit('closeSubYue')
			},
			//选择pk方式
			selPkType(data){
				this.selTypeId=data.id
			},
			//选择支付方式
			selDoor(val){
				this.payVal=val.value[0];
				this.showDoor=false
			},
      toPlaying(){
        this.$emit("payOrder", {
          notifyId: this.notifyId,            //支付类型 VIP_OPEN->VIP开台
          payType: this.payVal.type         //支付方式 1：余额支付，2：微信支付
        });
        this.closeSubYue();
      }
		}
	}
</script>

<style lang="scss" scoped>
	.sub-yue{
		padding: 20rpx 0 0 0;
		background-color: #EDEDED;
		.sub-yue-top{
      padding: 0 26rpx;
      justify-content: center;
      position: relative;
      .right-icon{
        position: absolute;
        right: 26rpx;
      }
		}
		.user-invie{
			margin: 30rpx 26rpx;
			image{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			.user-invite-mes{
				>view{
					&:nth-child(1){
						font-size: 32rpx;
						color: #333333;
						font-weight: 550;
						text{
							max-width: 160rpx;
							margin-right: 14rpx;
						}
					}
					&:nth-child(2){
						font-size: 24rpx;
						color: #FF7814;
						margin-top: 10rpx;
					}
				}
			}
		}
		.pk-total{
			padding: 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx;
			.pk-price{
				justify-content: space-between;
				text{
					font-size: 28rpx;
					color: #333333;
					&:nth-child(1){
						font-weight: 550;
					}
				}
			}
			.pk-price-tips{
				font-size: 22rpx;
				color: #666666;
				margin-bottom: 26rpx;
			}
		}
		.sub-door{
			padding: 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx;
			justify-content: space-between;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
			}
			.pk-rule{
				font-size: 22rpx;
				color: #333333;
			}

		}
		.sub-date-btm{
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			box-shadow: 0px 0px 19rpx 1rpx rgba(0,0,0,0.1);
			padding: 0 26rpx;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 20rpx;
			.sub-date-btm-left{
				align-items: baseline;
				.left-price{
					font-size: 26rpx;
					font-weight: 550;
					color: #333333;
					margin-right: 20rpx;
					text{
						font-size: 40rpx;
						color: #FF7814;
						font-weight: 550;
					}
				}
				>text{
					font-size: 22rpx;
					font-family: PingFang SC;
					color: #999999;
				}
			}
			.sub-yue-btn{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #FF7814;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
			.tips-look{
				font-size: 22rpx;
				color: #FF7814;
				text{
					margin-right: 10rpx;
				}
			}
		}
		.sub-door-pay{
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx 14rpx;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
			}
			.door-adres {
				font-size: 28rpx;
			}
		}
		.check-area{
			margin: 10rpx 26rpx 28rpx;
			.text-check{
				font-size: 24rpx;
				color: #999999;
				text{
					color: #263BDF;
				}
			}
		}
	}

</style>
